<template>
  <div class="kill-list table-theme">
    <head-title title="营销--秒杀活动列表"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left"></div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="searchOption"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
          <div class="add" style="margin-right: 10px">
            <el-button type="primary" @click="openDialog('add')"
              >添加秒杀活动</el-button
            >
          </div>
        </div>
      </div>
      <p class="data-number">总数据数：{{ total }}</p>
      <el-table :data="list">
        <el-table-column
          label="ID"
          width="100"
          align="center"
          prop="kill_id"
        ></el-table-column>
        <el-table-column
          label="名称"
          align="center"
          prop="title"
        ></el-table-column>
        <el-table-column
          label="开始时间"
          align="center"
          prop="start_time"
        ></el-table-column>
        <el-table-column
          label="结束时间"
          align="center"
          prop="end_time"
        ></el-table-column>
        <el-table-column
          label="添加时间"
          align="center"
          prop="add_time"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              plain
              @click="openDialog('details', scope.row)"
            >
              详情
            </el-button>
            <el-button
              type="primary"
              plain
              size="mini"
              @click="openDialog('edit', scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="primary"
              size="mini"
              plain
              @click="openDialog('goods', scope.row.kill_id)"
            >
              关联
            </el-button>
            <el-button
              type="danger"
              size="mini"
              plain
              @click="onDel('seckill', scope.row.kill_id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      :title="title"
      :visible.sync="is_dialog"
      center
      :modal-append-to-body="false"
      width="500px"
      @close="hideDialog('seckillForm')"
    >
      <el-form
        ref="seckillForm"
        :model="seckillForm"
        label-width="100px"
        :rules="seckillFormRules"
      >
        <el-form-item label="活动名称:" prop="title">
          <el-input
            v-model.trim="seckillForm.title"
            placeholder="请输入活动名称"
            :disabled="type === 'details'"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间:" prop="start_time">
          <el-date-picker
            v-model="seckillForm.start_time"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
            type="datetime"
            placeholder="请选择开始时间"
            :disabled="type === 'details'"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间:" prop="end_time">
          <el-date-picker
            v-model="seckillForm.end_time"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="23:59:59"
            type="datetime"
            placeholder="请选择开始时间"
            :disabled="type === 'details'"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideDialog('seckillForm')"> 取消 </el-button>
        <el-button
          v-if="type !== 'details'"
          type="primary"
          @click="onSubimt('seckillForm')"
        >
          确定
        </el-button>
      </div>
    </el-dialog>
    <!-- 秒杀活动商品列表 -->
    <el-dialog
      title="商品列表"
      :visible.sync="isGoodsDialog"
      :modal-append-to-body="false"
      width="60%"
      class="goods-dialogs"
      @close="hideGoodsDialog"
    >
      <p
        style="color: #34a1e0; cursor: pointer"
        @click="openDialog('goodsDialog')"
      >
        点击此处快速选择商品
      </p>
      <div class="table-mian">
        <el-table :data="goodsList" max-height="450px">
          <el-table-column
            label="ID"
            width="100"
            align="center"
            prop="id"
          ></el-table-column>
          <el-table-column
            label="商品ID"
            align="center"
            prop="goods_id"
          ></el-table-column>
          <el-table-column
            label="商品名称"
            align="center"
            prop="store_goods_name"
          ></el-table-column>
          <el-table-column label="商品图片" width="100" align="center">
            <template slot-scope="scope">
              <ImgPopover :src="scope.row.goods_image"></ImgPopover>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
                <el-popconfirm
                    title="此操作将永久删除此关联商品, 是否继续"
                     @confirm="onDel('goods', scope.row.id)"
                >
                <el-button slot="reference" type="danger"
                size="mini">删除</el-button>
                </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table-page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="goodsCount"
          :page-size="goodsLimit"
          :current-page="goodsPage"
          @current-change="initGoods"
        ></el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
import addShelvesStoreGoods from "@/components/layer-dialog/add-shelves-goods/add-shelves-store-goods-activity.vue";
export default {
  name: "kill_list",
  components: {
    ImgPopover,
    addShelvesStoreGoods,
  },
  data() {
    return {
      store_id: localStorage.getItem("store_id"),
      selectContent: "", // 分类搜索平输入框的值
      classSelect: "", // 分类搜索
      searchOption: [
        {
          value: 0,
          label: "活动ID",
        },
      ],
      total: 0,
      page: 1,
      limit: 30,
      list: [],
      seckillForm: {
        title: "",
        start_time: "",
        end_time: "",
      },
      seckillFormRules: {
        title: [{ required: true, message: "请输入活动名称" }],
        start_time: [{ required: true, message: "请选择开始时间" }],
        end_time: [{ required: true, message: "请选择结束时间" }],
      },
      is_dialog: false,
      title: "",
      type: "add",
      isGoodsDialog: false,
      goodsLimit: 30,
      kill_id: "",
      goodsPage: 1,
      goodsList: [],
      goodsCount: 0,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init(e) {
      this.page = e;
      let data = {
        page: e ? e - 1 : 0,
        limit: this.limit,
        store_id: this.store_id,
      };
      this.$http(this.$ApiList.KillList, data).then((res) => {
        this.total = res.datas.count;
        this.list = res.datas.data;
      });
    },
    goSearch(classSelect, selectContent) {
      this.classSelect = classSelect;
      this.selectContent = selectContent;
      this.init();
    },
    initGoods(e) {
      this.goodsPage = e;
      let data = {
        page: e ? e - 1 : 0,
        limit: this.goodsLimit,
        kill_id: this.kill_id,
      };
      this.$http(this.$ApiList.KillGoodsList, data).then((res) => {
        this.goodsList = res.datas.data;
        this.goodsCount = res.datas.count;
      });
    },
    openDialog(type, row) {
      if (type === "goods") {
        this.isGoodsDialog = true;
        this.kill_id = row;
        this.initGoods();
        return;
      }
      if (type === "goodsDialog") {
        this.$layer.iframe({
          title: "选择商品",
          maxmin: true,
          area: ["45%", "60%"],
          content: {
            content: addShelvesStoreGoods, //传递的组件对象
            parent: this, //当前的vue对象
            data: {
             kill_id:this.kill_id,
             goods_type:4
            }, //props
          },
        });

        return;
      }
      this.type = type;
      switch (type) {
        case "add":
          this.title = "添加秒杀活动";
          break;
        case "details":
        case "edit":
          this.title = type === "details" ? "秒杀活动详情" : "编辑秒杀活动";
          this.$http(this.$ApiList.KillInfo, {
            store_id: this.store_id,
            kill_id: row.kill_id,
            goods_type:4
          }).then((res) => {
            delete res.datas.add_time;
            this.seckillForm = res.datas;
          });
          break;
        default:
          break;
      }
      this.is_dialog = true;
    },
    onSubimt(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$delete(this.seckillForm, "add_time");
          if (this.type === "add") {
            this.$delete(this.seckillForm, "kill_id");
            this.seckillForm.store_id = this.store_id;
            this.$http(this.$ApiList.UpKill, this.seckillForm).then((res) => {
              this.$message.success(res.datas);
              this.is_dialog = false;
              this.$refs[formName].resetFields();
              this.init();
            });
          } else if (this.type === "edit") {
            this.$http(this.$ApiList.UpdateKill, this.seckillForm).then(
              (res) => {
                this.$message.success(res.datas);
                this.is_dialog = false;
                this.$refs[formName].resetFields();
                this.init(this.page);
              }
            );
          }
        } else {
          this.$message.error("请选择活动时间");
        }
      });
    },
    hideDialog(formName) {
      this.is_dialog = false;
      this.$refs[formName].resetFields();
    },
    // 刷新
    refreshPage() {
      this.classSelect = "";
      this.selectContent = "";
      this.page = 1;
      this.init();
    },
    onDel(type, kill_id) {
    if(type === 'goods'){
         this.$http(this.$ApiList.KillDelGoods, { id: kill_id }).then((res) => {
            this.$message.success(res.datas);
            this.initGoods(this.goodsPage);
          });
    }else{
        this.$confirm(
        `此操作将永久删除此秒杀活动, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
          this.$http(this.$ApiList.KillDel, {
            kill_id,
            store_id: this.store_id,
          }).then((res) => {
            this.$message.success(res.datas);
            this.init(this.page);
          });
      });
    }
      
    },
    hideGoodsDialog() {
      this.isGoodsDialog = false;
      this.goodsList = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.kill-list {
  /deep/ .el-date-editor {
    width: 100%;
  }
}
</style>